import { DetailRes, fetchDetailData } from "@/api/detail"
import { NavBar } from "antd-mobile"
import { useEffect, useState } from "react"
import { useNavigate, useSearchParams } from "react-router-dom"

function Detail() {

    const navigator = useNavigate()

    const [params] = useSearchParams()
    const id = params.get('id')

    const [detailData, setDetailData] = useState<DetailRes | null>(null)
    useEffect(() => {
        const getDetailData = async() => {
            const res = await fetchDetailData(id!)
            setDetailData(res.data.data)
        }
        getDetailData()
    }, [id])

    const back = () => navigator(-1)

    if(!detailData) {
        return <div>this is loading</div>
    }

    return <>
        <NavBar onBack={back}>{detailData?.title}</NavBar>
        <div dangerouslySetInnerHTML={{ __html: detailData?.content }}></div>
    </>
}

export default Detail